<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<base href="<%=request.getContextPath()%>/" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css">
<link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>



<script type="text/javascript">
	$(document).ready(
			function() {
				$("#jqGrid").jqGrid({
					url : 'user/getuserlist.json',
					// we set the changes to be made at client side using predefined word clientArray
					editurl : 'clientArray',
					datatype : "json",
					colModel : [ {
						label : '用户ID',
						name : 'userid',
						width : 75,
						key : true,
						editable : true,
						editrules : {
							required : true
						}
					}, {
						label : '用户名',
						name : 'username',
						width : 140,
						editable : true
					// must set editable to true if you want to make the field editable
					}, {
						label : '昵称',
						name : 'nickname',
						width : 100,
						editable : true
					}, {
						label : '登陆次数',
						name : 'times',
						width : 80,
						editable : true
					}, {
						label : '当前状态',
						name : 'state',
						width : 140,
						editable : true
					}, {
						label : '创建时间',
						name : 'cretime',
						width : 140,
						editable : true
					} ],
					sortname : 'userid',
					sortorder : 'asc',
					loadonce : true,
					viewrecords : true,
					width : 780,
					height : 200,
					rowNum : 10,
					regional : 'cn',
					emptyrecords : '没有记录被查询到！',
					pager : "#jqGridPager"
				});

				$('#jqGrid').navGrid(
						'#jqGridPager',
						// the buttons to appear on the toolbar of the grid
						{
							add : true,
							edit : true,
							del : true,
							search : false,
							refresh : false,
							view : false,
							position : "left",
							cloneToTop : false
						},

						// options for the Edit Dialog
						{

							editCaption : "编辑对话框",
							recreateForm : true,
							checkOnUpdate : true,
							checkOnSubmit : true,
							closeAfterEdit : true,
							afterSubmit : function(data, postdata, oper) {

								alert("afterSubmit");
								var response = data.responseJSON;
								if (response.hasOwnProperty("error")) {
									if (response.error.length) {
										return [ false, response.error ];
									}
								}
								return [ true, "", "" ];
							},
							errorTextFormat : function(data) {
								return 'Error: ' + data.responseText
							}
						},
						// options for the Add Dialog
						{
							url : "user/setuserlist.json",
							height : 'auto',
							width : 620,
							closeAfterAdd : true,
							recreateForm : true,
							clearAfterAdd : true,
							closeAfterEdit : true,
							reloadAfterSubmit : true,
							afterSubmit : function(response, postdata) {
								var json = response.responseText;
								alert(json);
								alert(postdata.userid);
								jQuery("#jqGrid").jqGrid('addRowData',
										postdata.userid, postdata);
								/* 	jQuery("#jqGrid").jqGrid('addRowData',postdata.userid, {
										state : "<font color='red'>Row 13 is updated!</font>"
									}); */
								/* 				var response = response.responseJSON;

								if (response.hasOwnProperty("error")) {
								if (response.error.length) {
								return [ false, response.error ];
								}
								}  */

								return [ true, json, postdata.userid ];
								/* 		return [ success, message, new_id ];

										var json = response.responseText; //format is {status:"success/error",msg:""} 
										var result = eval("(" + json + ")"), successs = false;
										if ("success" == result.status) {
											successs = true;
											$("#FormError td").html(result.msg);
											$("#FormError").show();
										}
										return [ successs, result.msg, "" ]; */
							},
							errorTextFormat : function(data) {
								return 'Error: ' + data.responseText
							}
						},
						// options for the Delete Dailog
						{
							errorTextFormat : function(data) {
								return 'Error: ' + data.responseText
							}
						});

				$("#jqGrid").jqGrid({
					addCaption : "Add Record",
					editCaption : "Edit Record",
					bSubmit : "Submit",
					bCancel : "Cancel",
					bClose : "Close",
					saveData : "Data has been changed! Save changes?",
					bYes : "Yes",
					bNo : "No",
					bExit : "Cancel",
				});
			});
</script>
</head>
<body>
	<table id="jqGrid"></table>
	<div id="jqGridPager"></div>

</body>
</html>